<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>商品大类管理</title>
    <link rel="stylesheet" href="/admin/css/categoryManage.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script type="text/javascript" src="/static/js/jquery-3.6.0.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</head>
<body><h2 style="text-align: center;">商品大类管理</h2>
    <button type="button" class="col-md-2 btn btn-success btn-add"  data-toggle="modal" data-target="#myModal4" style='margin-left: 454px;'><span class="glyphicon glyphicon-plus" aria-hidden="true">添加</span></button>
    <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel4">操作</h4>
            </div>
            <div class="modal-body">
<%--                添加操作--%>
                id：<input type="text" name="name" id="id1" value="编号" onblur="if(this.value==''){this.value='编号'}" onfocus="if(this.value=='编号'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 60px">
                品类名：<input type="text" name="name" id="name" value="请输入品类名" onblur="if(this.value==''){this.value='请输入品类名'}" onfocus="if(this.value=='请输入品类名'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 150px;">
                状态(1.上架)：<input type="text" name="status" id="status" value="1" onblur="if(this.value==''){this.value='1'}" onfocus="if(this.value=='1'){this.value=''}"  style="border: 1px solid darkgrey;opacity: 0.5;margin-left: 5px;width: 150px;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<%--                <button type="button" class="btn btn-primary"></button>--%>
                <input id="refer" type="submit" value="提交" class="btn btn-primary">
            </div>
        </div>
    </div>
</div>
    <table class="table table-hover table-one">
    </table>
</body>
<script>
    $.getJSON("/category.do",{method:"findAll"},function (categories) {
        //添加标头
        $(".table").html("<tr class=\"tr-title container\">\n" +
            "            <td class=\"col-md-3\">#</td>\n" +
            "            <td class=\"col-md-3\">品类名</td>\n" +
            "            <td class=\"col-md-3\">状态(1.正常2.无效)</td>\n" +
            "            <td class=\"col-md-3\">操作</td>\n" +
            "        </tr>");
        //添加内容
        console.log(categories);
        for(let i=0;i<categories.length;i++){
            let $id =$("<td class=\"col-md-3\">"+categories[i].id+"</td>");
            let $name =$("<td class=\"col-md-3\"><input name='name' value='"+categories[i].name+"' disabled></td>");
            let $status =$("<td class=\"col-md-3\"><input name='name' value='"+categories[i].status+"' disabled></td>");
            let $button1 = $("<button type=\"button\" class=\"btn btn-default btn-one\"><span class=\"glyphicon glyphicon-minus\" aria-hidden=\"true\">修改</span></button>");
            let $button2 = $("<button type=\"button\" class=\"btn btn-danger btn-one\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\">移除</span></button>");
            let $btn =$("<td class=\"col-md-3\" id="+categories[i].id+"></td>").append($button1).append($button2);
            //点击修改按钮
            $button1.click(function () {
                let one = $button1.parent("td").parent("tr").children().eq(1).children().eq(0);
                let two = $button1.parent("td").parent("tr").children().eq(2).children().eq(0);
                console.log(one);
                one.removeAttr("disabled");
                one.css({"font-size":"125%"});
                two.css({"font-size":"125%"});
                two.removeAttr("disabled");
                let id = $btn.attr("id");
                console.log(one.val());
                // 修改数据库
                one.change(function () {
                    $.getJSON("/category.do",{method:"updateById",id:id,name:one.val(),status:two.val()},function (resp) {
                        if(resp>0){
                            alert("修改成功！")
                        }else {
                            alert("修改失败,请稍后再试")
                        }
                        one.attr("disabled","disabled");
                        one.css({"font-size":"100%"});
                    })
                });
                two.change(function () {
                    $.getJSON("/category.do",{method:"updateById",id:id,name:one.val(),status:two.val()},function (resp) {
                        if(resp>0){
                            alert("修改成功！")
                        }else {
                            alert("修改失败,请稍后再试")
                        }
                        two.attr("disabled","disabled");
                        two.css({"font-size":"100%"});
                    })
                });
            })
            //点击删除
            let id = $btn.attr("id");
            $button2.click(function () {
                $.getJSON("/category.do",{method:"delById",id:id},function (resp) {
                    if(resp>0){
                        //删除元素
                        $id.parent().remove();
                        location.reload();
                    }else {
                        alert("删除失败,请稍后再试")
                    }
                })
            })
            let $tr = $("<tr class=\"container\"></tr>");
            //展示数据
            $tr.append($id).append($name).append($status).append($btn);
            $(".table").append($tr);
        }
        //添加
        $("#refer").click(function () {
            $.getJSON("/category.do",{method:"addCategory",id:$("#id1").val(),name:$("#name").val(),status:$("#status").val()},function (resp) {
                if(resp>0){
                    $("#refer").parent().parent().css("display","none");
                    location.reload();
                }else {
                    alert("添加失败,请稍后再试")
                }
            })
        })
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').focus();
        });
    })
</script>
</html>
